<template>
	<view class="container">
		<!-- 头部搜索框 -->
		<view style="width: 90%; margin: auto;" class="bigbox">
			<u-search placeholder="请输入目的地/景区" v-model="keyword" height="40" @custom="navigateToSearchPage" @search="navigateToSearchPage"></u-search>
		</view>
		<!-- 搜索历史 -->
		<view class="search-history">
			<view class="title">
				<text style="font-weight: 900;margin-left: 20rpx;">搜索历史</text>
				<image src="../../static/删除 (1).png" mode="" class="clear-btn" @click="clearHistory"></image>
			</view>
			<view class="history-list">
				<view class="history-item" v-for="(item, index) in searchHistory" :key="index">
					<text style="font-size: 12px;">{{ item }}</text>
				</view>
			</view>
		</view>
		<!-- 热搜框 -->
		 <view class="hot-search-container">
		    <view class="hot-search-title">
		      <text style="font-weight: 900;margin-left: 10px;">热门搜索</text>
			  <image src="../../static/火.png" mode=""></image>
		    </view>
			<!-- 详情 -->
			<view class="hot-search-list" v-for="(item, index) in hotSearchList" :key="index">
				<view class="hot-search-image">
					<image :src="item.src" mode=""></image>
				</view>
				<view class="hot-search-text">
					<text style="font-size: 12px; font-weight: 900;">{{item.title}}</text>
					<view class="">
						<text style="font-size: 12px;">人气值:{{item.score}}</text>
					</view>
				</view>
				<view class="hot-search-speak">
					<image src="../../static/耳机-F.png" mode="" style="width: 30px;height: 30px;margin: auto;"></image>
					<view class="hot-search-sp">
						<text style="font-size: 10px;">听讲解</text>
					</view>
				</view>
			</view>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				searchHistory: ['广州动物园', '成都', '深圳世界之窗', '大理','广州动物园', '成都', '深圳世界之窗', '大理',],
				hotSearchList: [
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					},
					{
						src: '../../static/微信图片_20240805143422.jpg',
						title:'世界之窗',
						score:'56986',
					}
				]
			};
		},
		methods: {
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			clearHistory() {
				this.searchHistory = [];
			},
			removeHistoryItem(index) {
				this.searchHistory.splice(index, 1);
			},
			navigateToSearchPage(value){
				uni.navigateTo({
					url:"/pages/sousuo/search-bar"
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.hot-search-container{
			.hot-search-speak{
				.hot-search-sp{
					margin: auto;
				}
				margin-left: 280rpx;
			}
			.hot-search-text{
				margin-left: 10px;
				margin-top: 10px;
			}
			.hot-search-list{
				display: flex;
				align-items: center;
				image{
					margin-left: 20rpx;
					margin-top: 30rpx;
					width: 200rpx;
					height: 85px;
					border-radius: 10px;
				}
			}
			.hot-search-title{
				image{
					width: 15px;
					height: 15px;
					margin-left: 5px;
				}
			}
			width: 700rpx;
			height: 1000px;
			margin: auto;
			margin-top: 20rpx;
			border-radius: 10rpx;
		}
		.search-history {
			width:700rpx;
			border-radius: 10rpx;
			padding: 20rpx;
			margin: auto;
			margin-top: 5px;
		}

		.title {
			width: 700rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		}

		.clear-btn {
			width: 20px;
			height: 20px;
		}

		.history-list {
			display: flex;
			flex-wrap: wrap;
		}

		.history-item {
			background-color: #f7f7f7;
			padding: 10rpx 20rpx;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 50rpx;
			margin: auto;
			display: flex;
			align-items: center;
		}

		.history-item text {
			margin-right: 10rpx;
		}

		.bigbox {
			display: flex;
			align-items: center;

			.uni-input {
				background-color: #f2f2f2;
				width: 250px;
				height: 40px;
				border-radius: 50px;
			}
		}
		background-color: #fff;
		margin: auto;
		height: 1200px;
	}
</style>